﻿<div class="tree-control">
    <div class="tree-input" ng-click="onControlClicked($event)">
        <span ng-if="selectedItems.length == 0" class="selected-items">
            <span ng-bind="defaultLabel"></span>
        </span>
        <span ng-if="selectedItems.length > 0" class="selected-items">
            <!--<span ng-repeat="selectedItem in selectedItems" class="selected-item">
                {{selectedItem.name}} <span class="selected-item-close"
                                            ng-click="deselectItem(selectedItem, $event)"></span>
            </span>
            <span class="caret"></span>-->
            <span ng-if="multiSelect">Selected Items: {{selectedItems.length}}</span>
            <span ng-if="!multiSelect && selectedItems.length > 0" style="display: inline-block; width: 100%;">
                {{selectedItems[0].name}}
                <span class="delete-sel-large" style="position: absolute; top: 4px; right: 8px;"
                      ng-click="deselectItem(selectedItems[0], $event)"></span>
            </span>
        </span>
        <!-- <input type="text" class="blend-in"/> -->
    </div>
    <div class="tree-view" ng-show="showTree">
        <div class="helper-container">
            <div class="line" data-ng-if="switchView">
                <button type="button" ng-click="switchCurrentView($event);" class="helper-button">{{switchViewLabel}}</button>
            </div>
            <div class="line">
                <!--<input placeholder="Search..." type="text" ng-model="filterKeyword" ng-click="onFilterClicked($event)"
                       class="input-filter">
                <span class="clear-button" ng-click="clearFilter($event)"><span class="item-close"></span></span>-->
                <input placeholder="Search..." type="text" ng-model="filterKeyword" ng-click="onFilterClicked($event)"
                       class="search-inpGray">
                <span class="clear-button delete-sel-large" ng-click="clearFilter($event)"><!--<span class="item-close"></span>--></span>
            </div>
        </div>
        <ul class="tree-container">
            <!-- ReSharper disable once Html.TagNotResolved -->
            <tree-item class="top-level" ng-repeat="item in inputModel" item="item" ng-show="!item.isFiltered"
                       use-callback="useCallback" can-select-item="canSelectItem"
                       multi-select="multiSelect" item-selected="itemSelected(item)"
                       on-active-item="onActiveItem(item)" select-only-leafs="selectOnlyLeafs"></tree-item>
        </ul>
    </div>
</div>
<div class="selItemsModal" ng-if="multiSelect">
    <div class="title-16-bold">Selected items: <span>{{selectedItems.length}}</span></div>
    <div class="listHeight100">
        <ul class="info-peergroup_small" style="margin-left: 0; width: 215px; height: auto; padding: 0;">
            <!--<li>{{selectedItems.length}}</li>-->
            <li ng-repeat="item in selectedItems">
                <span title="item.name" class="info-peergroup_small_item">{{item.name}}</span>
                <a href="" class="delete-sel" title="delete" ng-click="deselectItem(item, $event)">&nbsp;</a>
                <div class="clear">&nbsp;</div>
            </li>
        </ul>
    </div>
    </div>